<template>
  <div class="table">
    <div class="search-box" style="width: 200px;float: right;margin-bottom: 10px">
      <el-input
          class="search"
          size="mini"
          v-model="search"
          placeholder="输入关键字搜索"/>
    </div>
    <el-table
        :data="tables"
        height="650px"
        v-loading="loading"
        style="width: 100%"
        :header-cell-style="{background:'#ffd04b',color:'#606266'}"
        :row-class-name="vip">
      <el-table-column
          align="center"
          prop="id"
          label="订单编号"
          width="180">
      </el-table-column>
      <el-table-column
          align="center"
          prop="roomId"
          label="包间编号"
          width="180">
      </el-table-column>
      <el-table-column
          align="center"
          prop="roomBill"
          label="总消费">
      </el-table-column>
      <el-table-column
          align="center"
          prop="isPay"
          label="付款状态">
        <template slot-scope="scope">
          <el-select
              size="mini"
              v-model="scope.row.isPay"
              allow-create
              default-first-option
              @change="pay(scope.row)"
          >
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="160px">
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "bill",
  data() {
    return {
      search:'',
      tableData: [
      ],
      loading:true,
      options:[
          {
          value:'已支付',
          label:'已支付'
          },
        {
          value: '未支付',
          label: '未支付'
        }
      ],
      value:''
    }
  },

  methods: {
    vip({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'success-row'
      }
      return '';
    },
    handleDelete(row){
      this.$confirm('是否确定要删除'+row.id+'号订单?','删除订单',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() => {
        axios.delete('http://120.24.48.65:8282/bill/delete/'+row.id).then(response=>{
          console.log(response.data)
          if (response.data){
            this.$alert(row.id+'号订单删除成功！','删除订单',{
              callback:action => {
                //跳转到/order
                location.reload()
              }
            });
          }
        })
      }).catch(() =>{

      })
    },
    add(row){

    },
    pay(row){
      axios.put('http://120.24.48.65:8282/bill/pay',row).then(response =>{
        console.log(response.data)
        if (response.data){
          if(row.value == '已支付'){
            //已支付的订单，将包间设置为空
            axios.put('http://120.24.48.65:8282/rooms/update',{
              id:this.row.roomId,
              status:'占用',
              statusId:1
            })
          }
          location.reload()
        }
      })
    }
  },

  created() {
    axios.get('http://120.24.48.65:8282/bill/list').then(response =>{
      console.log(response.data)
      this.tableData = response.data
      if(response.data){
        setTimeout(() => {
          //代码
          this.loading = false
        }, 500);
      }
    })
  },

  computed:{
    tables:function (){
      let search = this.search
      if(search){
        return this.tableData.filter(function (dataNews){
          return Object.keys(dataNews).some(function (key) {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.tableData
    }
  },
}
</script>
<style >
.el-table .success-row {
  background: #f0f9eb;
}
</style>


